@layout("/backend/common/_container.html"){
<#Hidden id="dataId" value="${data!}"/>
<body style="background-color:white;padding:20px;">
    <div id="QCUseTime"></div>
    <div style="float:left;" id="Alias"></div>
</body>
<script type="text/javascript" src="${ctxPath}/static/common/js/echarts.min.js" charset="utf-8"></script>
<script language="javascript" type="text/javascript">
    var obj = new Object();
    var QCRows = $("#dataId").val();
    var data = JSON.parse(QCRows);
    //根据报告信息+查询参数，计算病种展现信息
    var QCRows = data.useTimeData
    var QCLength = QCRows.length, columns = 4, listHtml = "<div>"
    var per = Math.round((1 / columns) * 90) + '%';   //每列所在百分比
    var count = parseInt(QCLength / columns) + 1;
    for (var index = 0; index < count; index++) {		//行遍历
        var listlen = (((index + 1) * columns) < QCLength) ? (index + 1) * columns : QCLength;
        listHtml += "<div style='padding:10px'>";
        for (var qcIndex = index * columns; qcIndex < listlen; qcIndex++) { //对应行数据输出
            var qcobj = QCRows[qcIndex];
            listHtml += " <div style='border:1px solid #ccc;border-radius:5px;margin-right:10px;padding:3px;text-align:left;float:left;width:" + per + "' >"
            listHtml += " <p style='margin: 5px 0 10px 0;font-weight:bold;'>"+" "+qcobj.code+"</p>";
            listHtml += "<div>"
            listHtml += "<img style='float: left;border-radius: 10px;'  src='/static/common/img/sds/"+qcobj.description+".png' width='70px' height='70px' />"
            listHtml += " <div style='float: left;margin-left: 15px;'>";
            listHtml += " <p style='margin:0 0 10px 0;'>平均用时：<a style='cursor:pointer' onmouseover='obj.showRatioAlias(\""+qcobj.useTime+"\");'><span>"+qcobj.avgUseTime+" 分钟</span></a></p>";
            listHtml += " </div>";
            listHtml += "</div>"
            listHtml += "</div>";
        }
        listHtml += "</div>"
        listHtml += "<div style='clear:both'></div>"
    }
    listHtml += "</div>"
    $('#QCUseTime').html(listHtml);
    $.parser.parse('#QCUseTime');  //解析元素样式

    obj.showRatioAlias=function(usetimeStr){
        var usetimeArr=usetimeStr.split(',')

        var event = event || window.event;
        console.log(event)
        $("#Alias").webuiPopover('destroy');
        $HUI.popover('#Alias',{
            width:'500px',
            height:'300px',
            placement:'bottom',
            content:'<div id="AliasEcharts" style="width:100%;height:100%;"></div>',
            type:'html',
            offsetTop:-event.clientY+20,
            offsetLeft:event.clientX
        });
        $("#Alias").popover('show');
        //usetimeArr=[3,6,7,5,9,6,7,4,9,10,11,3]
        var myChart = echarts.init(document.getElementById('AliasEcharts'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '近期上报平均用时情况',
                textStyle:{
                    fontSize:16
                }
            },
            tooltip: {},
            legend: {},
            xAxis: {
                data: Array.from(new Array(usetimeArr.length).keys()) //生成病例序列号
            },
            yAxis: {},
            series: [
                {
                    name: '填报用时(分钟)',
                    type: 'line',
                    data: usetimeArr,
                    markLine: {
                        data: [{ type: 'average', name: '平均值' }]
                    }
                },

            ]
        };
        myChart.setOption(option);
    }
</script>
@}